import React from 'react';
import { Tag, Tooltip } from 'antd';
import { CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';

interface StatusTagProps {
  status: 'success' | 'processing' | 'waiting' | 'error';
  text: string;
  tooltip?: string;
}

const StatusTag: React.FC<StatusTagProps> = ({ status, text, tooltip }) => {
  const getIcon = () => {
    switch (status) {
      case 'success':
        return <CheckCircleOutlined />;
      case 'processing':
        return <SyncOutlined spin />;
      case 'waiting':
        return <ClockCircleOutlined />;
      case 'error':
        return <CloseCircleOutlined />;
    }
  };

  const tag = (
    <Tag
      icon={getIcon()}
      color={
        status === 'success' ? 'success' :
        status === 'processing' ? 'processing' :
        status === 'waiting' ? 'warning' :
        'error'
      }
    >
      {text}
    </Tag>
  );

  return tooltip ? <Tooltip title={tooltip}>{tag}</Tooltip> : tag;
};

export default StatusTag; 